import { connect } from 'dva'
import styles from './UnSuitable.scss'
import { Checkbox } from 'antd'
import { Button, Toast } from 'antd-mobile'
const UnSuitable = ({dispatch, 
  contractSign:{
    contract:{agree}
  },
  query
}) => {
  const onChange = (e) => {
    dispatch({
      type: 'contractSign/changeAgree',
      payload: {
        contract: {
          agree:e.target.checked
        },
      }
    })
  }
  const agreeAct = () => {
    if (!agree) {
      Toast.info('请先同意服务协议', 1)
    } else {
      dispatch({
        type: 'modules/getModules',
        payload: {
          pathname: '',
          businessId: '1231241227',
          process: 'contractSign',
          title: '电子合同签署',
          query:query
        }
      })
    }
  }
  return (
    <div className={styles.UnSuitableContainer}>
      <div className={styles.UnSuitableContent}>
        <div className={styles.UnSuitableTitle}>
          申万宏源证券金融产品或金融服务不适当警示及客户投资确认书        
        </div>
        <div className={styles.textContainer}>
          <div>
            姓名: <span className={styles.orangeFont}>张山峰</span>
          </div>
          <div style={{opacity: '0'}}>间隔</div>
          <div>
            资金账号: <span className={styles.orangeFont}>29867943</span>
          </div>
          <div style={{opacity: '0'}}>间隔</div>
          <div>
            尊敬的投资者:
          </div>
          <div style={{opacity: '0'}}>间隔</div>
          <div>
            您拟投资的金融产品拟投资的金融服务: &nbsp;&nbsp;&nbsp;<span className={styles.orangeFont}>{query.title}</span> 存在以下情况：     
          </div>
          <div style={{opacity: '0'}}>间隔</div>
          <div>
            1、其风险等级为：<span className={styles.orangeFont}>R3(中等风险)</span>，与您的风险承受能力等级：<span className={styles.orangeFont}>C2(谨慎型)</span>  不匹配。
          </div>
          <div style={{opacity: '0'}}>间隔</div>
          <div>
            2、其投资品种为：<span className={styles.orangeFont}>债券型基金</span>，可能与您确认的投资品种不一致。投资该项产品，可能导致高出您自身承受能力的损失。
          </div>
          <div style={{opacity: '0'}}>间隔</div>
          <div>
            3、其投资期限为：<span className={styles.orangeFont}>3年</span>，可能无法满足您预期的流动性需求或导致其他额外风险。投资该项产品，可能导致高出您自身承受能力的损失
          </div>
          <div style={{opacity: '0'}}>间隔</div>
          <div>
            本公司就上述情况向您做出提示，并建议您应当审慎考察该产品的特征及风险，自行做出充分风险评估。公司的适当性匹配意见不表明公司对产品或者服务的风险和收益做出实质性判断或者保证，公司履行投资者适当性职责不能取代客户本人的投资判断，不会降低产品或服务的固有风险，也不会影响客户依法承担相应的投资风险、履约责任以及费用。
          </div>
          <div className={styles.resultTip}>
            <span>
              若您经审慎考虑后，仍坚持投资该产品，请签署下附投资确认书。
            </span>
          </div>
        </div>
      </div>
      <div className={styles.investConfirmation}>
        <div className={styles.investTitle}>
          <span>
            投资者确认书
          </span>
        </div>
        <div className={styles.investContent}>
          <div className={styles.investHead}>
            申万宏源证券有限公司:
          </div>
          <div style={{ opacity: '0' }}>间隔</div>
          <div>
            本人/本机构已认真阅读了贵公司关于<span className={styles.orangeFont}>{query.title}</span>的相关提示，并已充分了解该产品或服务的特征和风险，充分知悉上述不匹配情况。本人/本机构经审慎考虑后，仍坚持投资该项产品，并愿意承担该项投资可能引起的损失和其他后果。投资该项产品的决定，系本人/本机构独立、自主、真实的意思表示，与贵公司及相关从业人员无关。
          </div>
          <div className={styles.investSign}>
            <div>投资者确认书: <span className={styles.orangeFont}>张三峰</span></div>
            <div>日期: <span className={styles.orangeFont}>2018/01/23</span></div>
          </div>
        </div>
      </div>
      <div className={styles.agree}>
        <Checkbox onChange={onChange}>
          <span className={styles.textSize}>
          我已阅读并知悉上述内容
          </span>
        </Checkbox>
      </div>
      <div className={styles.buttonSize}>
        <Button type='primary' onClick={agreeAct} className={styles.longButton}>我已阅读并同意</Button>
      </div>
    </div>
  )
}
const mapState = state => {
  return {
    contractSign:state.contractSign,
    query:state.modules.query
  }
}
export default connect(mapState)(UnSuitable)